﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="User_Register.aspx.cs" Inherits="WebPages.Pages.User_Register" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" href="../Css/Style01.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登录/注册</title>
   <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="../js/Check.js"></script>
<script>
    function register() {
        $("#Register").animate({
            left: '500px',
            opacity: 1
        });
        $("#Login").animate({
            left: '1200px',
            opacity:0
        })
    }
    function login() {
        $("#Register").animate({
            left: '-200px',
            opacity: 0
        });
        $("#Login").animate({
            left: '500px',
            opacity: 1
        })
    }
    
    $(document).keypress(function (event) {
        //console.log("123");
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == 13) {
            console.log("1777");
            console.log(document.activeElement.tagName);
            console.log(document.activeElement.parentElement);
            var x = document.activeElement;
            x = x.parentElement;
            console.log(x.tagName);

         
            while (x.tagName != 'DIV') {
                x = x.parentElement;
                console.log(x.tagName);
            }

            if (x.className == 'login') {
                $("#Login1_LoginButton").focus();
            } else if (x.className == 'reg') {

            }
            return false;
        }
      
    });
    $(document).ready(function () {
        var account = false;
        var sid = false;
        var name = false;
        var pwd = false;
        var pwdagain = false;
        var email = false;
        var upload = false;
        $("#SIDTextBox").blur(function a() {
            var obj = $("#SIDTextBox");
            var val = obj.val();
            if (val == "") {
                sid = false;            
                $("#SIDError").html("学号不能为空");

            } else {
                sid = true;              
                $("#SIDError").html("");
                $("#ChectButton").attr("disabled", false);
            }
          //  $("#SIDTextBox").css("width")
        });
        $("#NameTextBox").blur(function () {
            if ($("#NameTextBox").val() == "") {
                name = false;
                $("#NameError").html("姓名不能为空");
            } else {
                name = true;
                $("#NameError").html("");
                $("#ChectButton").attr("disabled", false);
            }
        });
        $("#AccountTextBox").blur(function () {
            if ($("#AccountTextBox").val() == "") {
                account = false;
                $("#AccountError").html("账号不能为空");
            } else {
                account = true;
                $("#AccountError").html("");
                $("#ChectButton").attr("disabled", false);
            }
        });
        $("#EmailTextBox").blur(function () {
            var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            if (!reg.test($("#EmailTextBox").val())) {
                email = false;
                $("#EmailError").html("邮箱地址不符合规范");
            } else {
               email = true;
                $("#EmailError").html("");
                $("#ChectButton").attr("disabled", false);
            }
        });
        $("#AcpUpload").blur(function () {
            var file = $("#AcpUpload").val();
            var FileExt = file.replace(/.+\./, "");
            console.log(FileExt);
            if (file == "") {
                upload = false;
                $("#UploadError").html("认证图片不能为空");
            } else if (FileExt != "jpg" && FileExt != "png" && FileExt != "gif" && FileExt != "jpge") {
                upload = false;
                $("#UploadError").html("认证图片格式有误（请检查你的图片是否是.jpg/.png/.gif/.jpge中的一种）");
            } else {
                upload = true;
                $("#UploadError").html("");
                $("#ChectButton").attr("disabled", false);
            } 
        });
        $("#PwdTextBox").blur(function () {
          
            if ($("#PwdTextBox").val() == "") {
                pwd = false;
                //console.log($("#PwdTextBox").val());
                $("#PwdError").html("密码不能为空");
            } else {
                pwd = true;
                $("#PwdError").html("");
                $("#ChectButton").attr("disabled", false);
            }

        });
        $("#PwdTextBox_Check").blur(function () {
            if ($("#PwdTextBox_Check").val() != $("#PwdTextBox").val()) {
                pwdagain = false;
                $("#PwdAgainError").html("两次密码输入不一致");
            } else {
                pwdagain = true;
                $("#PwdAgainError").html("");
                $("#ChectButton").attr("disabled", false);
            }
        });
        $("#ChectButton").click(function () {
           // console.log("123");
            $("#reg").children().each(function () {
                $(this).focus();
            });
            if (account && sid && pwd && email && pwdagain && name && upload) {
                var check1 = $("#CheckText").val().toLowerCase();
                var reg = new RegExp(',', "g");
                var check2 = $("#SendData1").val().toLowerCase().toString().replace(reg,"");
                
                if (check1 != check2) {
                    $("#CheckError").html("验证码错误。");
                    $("#CheckError").focus();
                    var show_num = [];
                    draw(show_num);
                    $('#SendData1').val(show_num);
                    return false;

                } else {
                    $("#Up").html("图片上传中，请耐心等待....");
                    $("#CheckError").html("");
                }
                
            }
            else {
                if (!sid) {
                    $("#SIDTextBox").focus();
                    console.log("Hello");
                } else if (!name) {
                    $("#NameTextBox").focus();
                } else if (!account) {
                    $("#AccountTextBox").focus();
                } else if (!email) {
                    $("#EmailTextBox").focus();
                } else if (!upload) {
                    $("#AcpUpload").focus();
                } else if (!pwd) {
                    $("#PwdTextBox").focus();
                } else if (!pwdagain) {
                    $("#PwdTextBox_Check").focus();
                }
                //$("#ChectButton").attr("disabled", true);
                return false;
            }
            
        });


    });

    
</script>

</head>
<body>
    <div class="header w ">   
        <%--导航条--%>
        <div class="logo">
            <img src="../Pictures/logo.png" alt="" />
        </div >
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">商品一览</a></li>
                <li><a href="#">个人中心</a></li>
                <li>
                    <div></div>
                </li>
            </ul>
        </div>
    </div>

    <form id="form1" runat="server"> 
        <div id="Register" class="register">
      <table id="regtable" >

          <tr>
              <th id="registerButton">
                  <div>
                      <img src="../Pictures/左箭头.png" alt="" />
                      <input type="button" onclick="login()" value="登录"/>
                  </div>
                 
                  
              </th>
              
              <th rowspan="2" id="registerTable"> 
             <div id="reg">
                  <p>注册</p>
            <asp:Label id="SIDLabel" CssClass="RegLabel" runat="server" Text="学&nbsp&nbsp&nbsp&nbsp号："></asp:Label>                 
            <asp:TextBox ID="SIDTextBox" CssClass="RegTextBox" runat="server"></asp:TextBox>
                 <br />
                <label id="SIDError" class="Error"></label>
            <br />
                 <br />
            <asp:Label id="NameLabel" CssClass="RegLabel" runat="server" Text="姓&nbsp&nbsp&nbsp&nbsp名："></asp:Label>
            <asp:TextBox ID="NameTextBox" CssClass="RegTextBox" runat="server"></asp:TextBox>
                 <br />
                 <label id="NameError" class="Error"></label>
            <br />
                 <br />
            <asp:Label id="AccountLable" CssClass="RegLabel" runat="server" Text="账&nbsp&nbsp&nbsp&nbsp号："></asp:Label>
            <asp:TextBox ID="AccountTextBox" CssClass="RegTextBox" runat="server"></asp:TextBox>
                 <br />
                  <label id="AccountError" class="Error"></label>
            <br />
                 <br />
            <asp:Label id="EmailLabel" CssClass="RegLabel" runat="server" Text="邮箱地址："></asp:Label>                 
            <asp:TextBox ID="EmailTextBox" CssClass="RegTextBox" runat="server" TextMode="Email"></asp:TextBox>
                 <br />
                 <label id="EmailError" class="Error"></label>
            <br />
                 <br />
            <asp:Label id="AcpLabel" CssClass="RegLabel" runat="server" Text="认证图片："></asp:Label>
            <asp:FileUpload ID="AcpUpload" runat="server"  BorderWidth="1px" Width="12em" />
                 <br />
                 <label id="UploadError" class="Error"></label>
            <br />
                 <br />
            <asp:Label id="PwdLable" CssClass="RegLabel" runat="server" Text="密&nbsp&nbsp&nbsp&nbsp码："></asp:Label>
             <asp:TextBox ID="PwdTextBox" CssClass="RegTextBox" runat="server" TextMode="Password"></asp:TextBox>
                 <br />
                 <label id="PwdError" class="Error"></label>
            <br />
                 <br />
            <asp:Label id="PwdLable_Check" CssClass="RegLabel" runat="server" Text="确认密码："></asp:Label>
            <asp:TextBox ID="PwdTextBox_Check" CssClass="RegTextBox" runat="server" TextMode="Password"></asp:TextBox>
                 <br />
                 <label id="PwdAgainError" class="Error"></label>
            <br />
                 <br />
            <asp:Label id="CheckLabel" CssClass="RegLabel" runat="server" Text="验证码："></asp:Label>
            <input type="text" id="CheckText" runat="server" value="" placeholder="（不区分大小写）" autofocus="autofocus" />
              <canvas id="canvas" width="100" height="30"></canvas>
                 <br />
                 <label id="CheckError" class ="Error"></label>
             <br />
                 <br />
                <asp:Button ID="ChectButton" runat="server" Text="注册" OnClick="ChectButton_Click"  BackColor="#06a3c4" ForeColor="White" Width="60px" />
         </div></th>
              
          </tr>
          
          </table>
       
             <input id="SendData1" type="hidden" runat="server" /> 

        </div>


         
      <div id="Login" class="login">
   
        
            <table border="1">
                <tr>
                <th >                                        
                       <div id="loginTable">      
                            <p>登录</p>                               
                   <asp:Login ID="Login1" CssClass="login" runat="server" OnAuthenticate="Login1_Authenticate" TitleText="" TabIndex="0"></asp:Login>  
                                                            
                        </div>                                        
                </th>
                    <th id="loginButton">
                        <div>
                        <img src="../Pictures/右箭头.png" alt="" />
                        <input type="button" onclick="register()" value="注册" /></div>
                    </th>
                </tr>
            </table>

        

</div>
    
    </form>
    <div style="width:1920px;height:826px"></div>
    <img src="../Pictures/down.png" alt="" id="bottomimg" />
</body>
</html>
